<template>
   <!-- 表格数据 -->
   <el-table v-loading="loading" :data="tableData">
      <el-table-column label="服务区" prop="serviceName"/>
      <el-table-column label="到访日期" prop="visitDate"/>
      <el-table-column label="到访时段" prop="visitTime"/>
      <el-table-column label="小客车已使用的车位数" prop="sbussUsedNum"/>
      <el-table-column label="小客车剩余的车位数" prop="sbussRemainderNum"/>
      <el-table-column label="小客车超出的车位数" prop="sbussOverstepNum"/>
      <el-table-column label="大客车已使用的车位数" prop="bbussUsedNum"/>
      <el-table-column label="大客车剩余的车位数" prop="bbussRemainderNum"/>
      <el-table-column label="大客车超出的车位数" prop="bbussOverstepNum"/>
   </el-table>
   <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryData.pageNum"
      v-model:limit="queryData.pageSize"
      @pagination="getList"
   />
</template>

<script setup>

import { parkList } from '@/api/bigData/park'
const { proxy } = getCurrentInstance();
const props = defineProps({
   queryParams:{
      typeof: Object,
      default: () => {}
   }
})
const queryData = reactive({
    pageNum: 1,
    pageSize: 10
});
const tableData = ref([])
const loading = ref(false);
const total = ref(0)
/** 查询角色列表 */
const getList = ()=> {
   loading.value = true;
   const queryParams = toRaw({ ...props.queryParams, ...queryData });
   parkList(queryParams).then(response => {
      tableData.value = response?.rows || [];
      total.value = response?.total || 0;
      loading.value = false;
   }).catch(() => {
      loading.value = false;
      proxy.$modal.msgError("获取数据，请稍后重试!");
   });
}
defineExpose({getList})
getList();
</script>
<style lang="scss" scoped>
  .app-container{
    display: flex;
    justify-content: space-between;
  }
  
</style>
